<template>
  <div>
    <h1>商品名称name： {{  name  }}</h1>
    <h1>商品价格price： {{  price  }}</h1>
    <h1>商品涨价后的价格: {{  getterPrice  }}</h1>
    <!-- 使用 mapGetters 的显示 -->
    <h1>使用 mapGetters 的涨价后价格: {{  mappedGetterPrice  }}</h1>
    
    <!-- 更多 mapGetters 示例 -->
    <h2>更多 mapGetters 示例：</h2>
    <p>格式化价格: {{ formattedPrice }}</p>
    <p>产品名称(大写): {{ productName }}</p>
    <p>直接映射的 getterPrice: {{ getterPrice }}</p>
    
    <!-- 演示 mutations 和 actions -->
    <h2>Mutations 和 Actions（异步） 演示：</h2>
    <div>
      <input v-model="newName" placeholder="输入新商品名称">
      <button @click="updateName">立即更新名称</button>
      <button @click="updateNameAsync">异步更新名称</button>
    </div>
    <div>
      <input v-model.number="newPrice" type="number" placeholder="输入新价格">
      <button @click="updatePrice">立即更新价格</button>
      <button @click="increasePriceBy100">增加100元</button>
      <button @click="decreasePriceBy100">减少100元</button>
      <button @click="updatePriceAsync">异步更新价格</button>
    </div>
  </div>
</template>

<script>
// 导入 mapGetters 辅助函数
import { mapGetters } from 'vuex';

export default {
  name: 'HelloWorld',
  data() {
    return {
      newName: '',
      newPrice: 0
    }
  },
  computed: {
    name() {
      return this.$store.state.name
    },
    price() {
      return this.$store.state.price
    },
    getterPrice() {
      return this.$store.getters.getterPrice
    },
    // 使用 mapGetters 映射 getters
    ...mapGetters({
      mappedGetterPrice: 'getterPrice',
      formattedPrice: 'formattedPrice',
      productName: 'productName'
    }),
    // 直接映射 getters（属性名与 getter 名相同）
    ...mapGetters([
      'getterPrice'  // 这会创建一个名为 getterPrice 的计算属性
    ])
  },
  methods: {
    // 使用 mutations
    updateName() {
      if (this.newName) {
        this.$store.commit('setName', this.newName)
        this.newName = ''
      }
    },
    updatePrice() {
      if (this.newPrice >= 0) {
        this.$store.commit('setPrice', this.newPrice)
        this.newPrice = 0
      }
    },
    increasePriceBy100() {
      this.$store.commit('increasePrice', 100)
    },
    decreasePriceBy100() {
      this.$store.commit('decreasePrice', 100)
    },
    // 使用 actions
    updateNameAsync() {
      if (this.newName) {
        this.$store.dispatch('updateNameAsync', this.newName)
        this.newName = ''
      }
    },
    updatePriceAsync() {
      if (this.newPrice >= 0) {
        this.$store.dispatch('updatePriceAsync', this.newPrice)
        this.newPrice = 0
      }
    }
  }
}
</script>